<template>
	<view class="main">
		<u-navbar :is-back="true" title="修改密码" :background="background" :border-bottom="false" title-color="#fff"
			title-size="35rpx" title-bold="true" back-icon-color="#fff">
		</u-navbar>
		<view class="form">
			<view class="phone">
				<label>手机号</label><input type="text" value="" v-model="phone" placeholder="请输入手机号" />
			</view>
			<view class="phone">
				<label>验证码</label>
				<view class="inputs">
					<view style="display: flex; justify-content: space-between; align-items: center;">
						<input v-model="codes" placeholder="请输入验证码" />
							<view class="code"  @click="sendCodeBtn">
								{{send?'发送验证码':second+'s重新发送'}}
							</view>
					</view>
				</view>
			</view>
			<view class="phone">
				<label>新密码</label><input type="text" value="" placeholder="请输入新密码" v-model="pwd" />
			</view>
		</view>
		<view class="btn" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#111111',
				},
				phone: '',
				pwd: '',
				codes: '',
				s: 60,	//默认倒计时
					second: 0,
					send: true, //按钮可以点击


			}
		},
		methods: {
			//验证码
			codeChange(text) {
				this.codeText = text;
			},
			submit() {
				global.$http.request({
					url: '/api/setting/phone_pwd',
					data: {
						phone: this.phone,
						code: this.codes,
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					
					this.phone = '';
					this.pwd = '';
					this.codes = '';
					if (res.data.code == 0) {
						console.log(res);
					}

				})
			},
		// 发送验证码
		sendCodeBtn() {
			let that = this;
			// 防止多次重复点击
			if (!that.send) {
				return false;
			}
			global.$http.request({
				url: '/api/index/send_yzm',
				data: {
					scene: 'phone_pwd',
					phone: that.phone,
					token: uni.getStorageSync('token')
				}
			}).then(res => {
				console.log(res);
				if (res.data.code == 0) {
					// 发送验证码
					that.send = false;
					uni.showToast({
						title: '发送成功',
						icon: 'none',
						success: () => {
							this.time(); // 倒计时
						}
					})
				}
			})
		
		},
		// 倒计时
		time() {
		
			let that = this;
			that.second = that.s;
			let interval = setInterval(function() {
				if (that.second == 1) {
					that.send = true;
					that.second = that.s;
					clearInterval(interval);
				} else {
					console.log(that.second)
					that.second--;
				}
			}, 1000)
		},
		}
	}
</script>

<style lang="scss">
	page {
		font-family: PingFang SC-Regular, PingFang SC;
		background-color: #111111;

		width: 750rpx;

		.main {
			display: flex;
			flex-direction: column;
			align-items: center;

			.form {
				margin-top: 20rpx;
				width: 686rpx;
				background: #181818;
				border-radius: 32rpx;
				opacity: 1;

				.phone {
					display: flex;
					align-items: center;
					padding: 0 24rpx;
					border-bottom: 2rpx solid #262626;

					label {
						width: 180rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #FFFFFF;

					}

					input {
						padding: 34rpx 0;
						color: #fff;
						opacity: 0.8;
						font-size: 32rpx;
						font-weight: 400;
						color: #999999;

					}

					.inputs {
						// width: 520rpx;
						input {
							margin-left: 15rpx;
							// width: 250rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: #FFFFFF;
							opacity: 0.8;

						}

						.code {
							white-space: nowrap;
							font-weight: 400;
							color: #F3C860;

							font-size: 32rpx;
							opacity: 0.7;

						}
					}
				}

				.phone:last-child {
					border: none;
				}
			}

			.btn {
				margin-top: 60rpx;
				padding: 24rpx 128rpx;
				background: #F3C860;
				border-radius: 46rpx;
				opacity: 1;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
		}
	}
</style>
